<template>
    <view>
		 <!-- <xmInfo
		    :projectno="itemContent.projectno"
		    :projectname="itemContent.projectname"
			ref="xmInfo"
		  ></xmInfo> -->
		<u-sticky>
			<u-navbar back-text=" " title="表务日志" :background="background" title-color="#ffffff" :custom-back="customBack" back-icon-color="#ffffff" ref="navbar" title-size="36"></u-navbar>
			<xmInfo
				:projectno="itemContent.projectno"
				:projectname="itemContent.name"
				ref="xmInfo"
				class="u-sticky"
			></xmInfo>
		</u-sticky>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore" :refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="refresherrefresh"
        	@scrolltoupper="refresherrefresh"
			:style="{ height: computedScrollViewHeight }"
		>
        <view
          class="scroll-content"
          ref="scrollContent"
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          "
          :style="{ height: computedScrollViewHeight }"
        >
            <view class="cu-item shadow"  v-for="(item,index) in list" :key="item.id">
			<view class="cu-form-group justify-start">
				<view class="title">
					<view style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;width: 40px;text-align: center;font-style: italic;font-weight: bold">
					{{ index + 1 }}
				</view>
				</view>
                <!-- zf_waterLog_operType -->
				<view class="text-xl text-bold">
                    <dictLabel
                        :value="item.dtype ? item.dtype : '0'"
                        :dict-list="dictList"
                    ></dictLabel>
                </view>
			</view>

                <view class="cu-form-group justify-start">
                    <view class="title">操作人</view>
                    <view>{{ item.duser }}{{ item.logtime ? '(' + item.logtime + ')' : '' }} </view>
                </view>
				<view class="cu-form-group justify-start">
				    <view class="title">操作内容</view>
				    <view>{{ item.devent }}</view>
				</view>

               
            </view>
			<view v-if="list.length" class="loadmore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
			<u-empty v-if="!list.length"></u-empty>
        </view>

		</scroll-view>
    </view>
</template>
<script>
import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
import dictLabel from "@/pages/zfgs/index/componetns/dictLabel.vue";
import {hasPermission} from '@/common/fire.js'
  export default{
  components: { xmInfo,dictLabel },
    data(){
        return{
			background:{
				backgroundColor: '#3E97B0',
			},
			triggered: false,
			loadStatus: 'loadmore',
			query: {
				pageNo: 1,
				pageSize: 20,
			},
			itemContent:{},
            list:[],
			scrollViewHeight: 0,
      		headerHeight: 0,
			editflag:hasPermission('btn:edit:guabiao'),
			addflag:hasPermission('btn:add:guabiao'),
			flag:false,
            dictList: [],
        }
    },
	onShow() {
		this.query.pageNo = 1;
		this.loadList();
	},
	onLoad(e) {
		console.log(e,'e====');
	  if (typeof e.xm !== "undefined") {
	    try {
	      this.itemContent = JSON.parse(e.xm);
		 this.query.projectno = this.itemContent.projectno
	      console.log(this.itemContent);
	    } catch (error) {
	      console.error("Failed to parse item:", error);
	    }
	  } else {
	    console.warn("Item is undefined.");
	  }

      this.getDictList() 
	},
	mounted() {
		this.$refs.xmInfo.$on("child-mounted-done", () => {
		this.calculateScrollViewHeight();
		});
	},
	computed: {
		computedScrollViewHeight() {
		return this.scrollViewHeight === "auto"
			? "auto"
			: `${this.scrollViewHeight}px`;
		},
	},
    methods:{
        getDictList() {
            this.$u.api.dictListData({ dictType: "zf_waterLog_operType" }).then((res) => {
                this.dictList = res;
            });
        },

		customBack(){
			// 跳转到工作台页面
			// uni.navigateTo({
			// 	url: "/pages/zfgs/index/index/index?item=" + JSON.stringify(this.itemContent),
			// });
			uni.navigateBack({
			  delta: 1,
			});
		},
		async calculateScrollViewHeight() {
			try {
				// 等待头部高度计算完成
				await new Promise((resolve) => {
				this.$nextTick(() => {
					this.headerHeight = this.$refs.xmInfo.$refs['u-sticky'].height + this.$refs.xmInfo.$refs['u-sticky'].h5NavHeight + this.$refs.navbar.navbarHeight;
					resolve();
				});
				});
				// 计算tabBar高度
				this.tabBarHeight = 0; // 假设tabbar高度为50px，实际应根据实际情况获取
				
				// 获取屏幕高度
				const systemInfo = uni.getSystemInfoSync();
				const screenHeight = systemInfo.windowHeight;

				// 计算scroll-view高度
				console.log(this.headerHeight,'headerHeight',screenHeight);
				this.scrollViewHeight =
				screenHeight - (this.headerHeight + this.tabBarHeight);
			} catch (error) {
				console.error("Error while calculating ScrollView height:", error);
			}
		},
		async refresherrefresh() {
			this.triggered = true
			this.query.pageNo = 1;
			await this.loadList()
			this.triggered = false
		},
		loadList(type) {
            console.log(this.query,'------')
			this.$u.api.zfgs.pmWatermeterlogListData(this.query).then(res => {
				if (res.list.length < 20 || res.list.length == 0) {
					this.loadStatus = "nomore";
				}
				var list = res.list;
				if (type == "add") {
					for (var i = 0; i < list.length; i++) {
						this.list.push(list[i])
					}
				} else {
					this.list = list;
				}
				this.list.forEach(item => {
					if (item.createDate) {
						item.createDate = this.formatDate(item.createDate)
						item.installtime = this.formatDate(item.installtime)
					}
				});

			})
		
		},
		loadMore() {
			this.loadStatus = "loading";
			setTimeout(() => {
				this.query.pageNo += 1;
				this.loadList("add");
			}, 100);
		},
		
        add(item){
            if(item){
                uni.navigateTo({
                    url: '/pages/zfgs/process/meter/pmWatermeter/readOnlyForm?id='+item.id
                })
            }else{
				const xm = {
					projectno : this.itemContent.projectno,
					name : this.itemContent.projectname,
				}
				uni.navigateTo({
					url: "/pages/zfgs/process/meter/pmWatermeter/createForm?xm=" + JSON.stringify(xm),
				});
            }
        },
        // 时间格式化转化成年月日
		formatDate(date) {
			var date = new Date(date);
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			m = m < 10 ? '0' + m : m;
			var d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			return y + '-' + m + '-' + d;
		},
    }
  }

</script>
<style lang="scss" scoped>
/deep/ .u-progress.data-v-0d33af60 {
	display: none;
}
.cu-btn {
  font-size: 16px;
  height: 40px;
}
.foot{
    background: #fff;
	min-height: 80px;
}
.cu-item{
  flex-wrap: wrap;
  padding: 15px !important;
}
.title{
    flex-shrink: 0;
	width: 220rpx;
}
.grid-square{
    margin-bottom: 0 !important;
}
</style>